<template>
   <div class="detail">
    <Head :title="title"></Head>
    <img src="//yanxuan.nosdn.127.net/75c55a13fde5eb2bc2dd6813b4c565cc.jpg" />
    <img src="//yanxuan.nosdn.127.net/e27e1de2b271a28a21c10213b9df7e95.jpg" />
    <img src="//yanxuan.nosdn.127.net/9d413d1d28f753cb19096b533d53418d.jpg" />
    <img src="//yanxuan.nosdn.127.net/64b0f2f350969e9818a3b6c43c217325.jpg" />
    <img src="//yanxuan.nosdn.127.net/a668e6ae7f1fa45565c1eac221787570.jpg" />
    <img src="//yanxuan.nosdn.127.net/0d4004e19728f2707f08f4be79bbc774.jpg" />
    <img src="//yanxuan.nosdn.127.net/79ee021bbe97de7ecda691de6787241f.jpg" />
    <h2>专题推荐</h2>
    <div v-for="item in tips" :key="item.id">
      <img :src="item.scene_pic_url" alt="" />
      <p>{{ item.title }}</p>
    </div>
  </div>
</template>

<script setup>
import { detailaction } from '@/api/topic'
import Head from '@/components/title.vue'
import { ref } from 'vue'
const title = ref('专题详情')
const tips = ref()

detailaction().then(res => {
  console.log(res)
  tips.value = res.recommendList
})
</script>
<script>
export default {
  name: 'topicDetail'
}
</script>

<style lang="scss" scoped>
.detail {
  text-align: center;
  img {
    width: 100%;
    margin-top: 21px;
  }
  h2 {
    font-size: 38px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 500;
  }
  p {
    font-size: 30px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 500;
  }
}
</style>
